<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<view class="headerContainer">
			<view class="infoWrapper">
				<view style="width: 100%;padding-left: 20rpx;">
					<view class="name text-1line-ellipsis">
						{{sellerObj.name}}
					</view>
					<view class="shopName text-2line-ellipsis">
						{{shopInfo.name}}
					</view>
				</view>

				<view style="width: 100%;padding-left: 20rpx;">
					<view v-if="sellerObj.post&&sellerObj.post.length>0" class="itemContainer">
						<image class="icon" src="@/static/image/post.png" mode=""></image>
						{{sellerObj.post}}
					</view>
					<view v-if="sellerObj.wechatCode&&sellerObj.wechatCode.length>0" class="itemContainer"
						>
						<image class="icon" src="@/static/image/wechat.png" mode=""></image>
						{{sellerObj.wechatCode}}
<!-- 						<image class="icon" src="@/static/image/icon_info_copy.png" mode=""></image> -->
					</view>

					<view class="itemContainer" @click="gotoPhone">
						<image class="icon" src="@/static/image/telephone.png" mode=""></image>
						{{sellerObj.phone}}
					</view>
				</view>

			</view>

			<template v-if="sellerObj.avatar">
				<image :src="sellerObj.avatar" class="mask" mode=""></image>
			</template>
			<view v-else class="mask"></view>

		</view>
		<view class="middleContainer">
			<view class="item" @click="previewImg" v-if="sellerObj.wechatQrcode&&sellerObj.wechatQrcode.length>0">
				<image class="icon" src="@/static/image/icon_card_wechat_qrcode.png" mode=""></image>
				微信二维码
			</view>

			<view class="item" @click="onCopyWechatCode" v-if="sellerObj.wechatCode&&sellerObj.wechatCode.length>0">
				<image class="icon" src="@/static/image/icon_wechat_number.png" mode=""></image>
				复制微信号
			</view>

			<button style="border: none;margin: 0;padding: 0;" plain="true" type="default" open-type="share"
				:data-id="buyerObj.salesmanId" :data-type="'card'"
				:data-sharepath="'/pages/client/card/card?id='+buyerObj.salesmanId">
				<view class="item">
					<image class="icon" src="@/static/image/share.png" mode=""></image>
					分享名片
				</view>
			</button>
		</view>

		<view class="introContainer" @click="openWechatMap">
			<view class="title">
				<view class="icon">
				</view>
				<view class="text">
					{{shopInfo.name}}
				</view>
			</view>
			<view class="address">
				<image class="left" src="@/static/image/card_nei_icon_address.png" mode=""></image>
				<view class="middle">
					{{shopInfo.address}}
				</view>
				<u-icon class="more" color="#888" :size="'30rpx'" name="arrow-right"></u-icon>
			</view>

		</view>


		<view v-if="sellerObj.personSignature&&sellerObj.personSignature.length>0" class="introContainer">
			<view class="title">
				<view class="icon">
				</view>
				个人介绍
			</view>
			<view class="content">
				{{sellerObj.personSignature}}
			</view>
		</view>
		
		<view v-if="noteList&&noteList.length>0" class="introContainer">
			<view class="title">
				<view class="icon">
				</view>
				笔记列表
			</view>
			
			<view class="noteContainer" 
				v-for="(item, index) in noteList" :key="index">
				<view class="header">
					<view class="left">
						<view class="title text-2line-ellipsis">
							{{item.title}}
						</view>
						<view class="detail text-2line-ellipsis">
							{{item.briefly}}
						</view>
		
						<view class="dataWrapper">
							<view class="pageViews">
								<image class="iconWrapper" src="@/static/image/icon_preview.png" mode=""></image>
								{{item.pageViews||"0"}}
							</view>
							<view class="timeWrapper">
								<image class="iconWrapper" src="@/static/image/icon_time.png" mode=""></image>
								{{item.updateTime||item.createTime}}
							</view>
						</view>
					</view>
					<image class="right" :src="item.cover" mode="scaleToFill"></image>
				</view>
			</view>
		
		</view>
		
		<view v-if="projectTrends&&projectTrends.length>0" class="introContainer">
			<view style="display: flex;justify-content: space-between;">
				<view class="title">
					<view class="icon">
					</view>
					项目动态
				</view>
				<view class="title" style="font-size: 24rpx;" >
					查看更多
					<u-icon class="more" color="#888" :size="'30rpx'" name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="trendsContainer">
				<image class="right" :src="projectTrends[0].cover" mode=""></image>
				<view class="content">
					{{projectTrends[0].content}}
				</view>
				<view v-if="projectTrends[0].mpUrl&&projectTrends[0].mpUrl.length>0" class="detailWrapper">
					详情
				</view>
			</view>
		</view>
		<view v-if="projectAlbums&&projectAlbums.length>0" class="introContainer">
			<view class="title">
				<view class="icon">
				</view>
				项目相册
			</view>
			<view class="imageWrapper">
				<view class="imageContainer" v-for="(item, index) in projectAlbums"
					:key="index">
					<image class="icon" :src="item.cover" mode=""></image>
					<view class="title text-1line-ellipsis">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>





		<view class="" style="height: 200rpx;">

		</view>

		<view class="bottomContainer">
			<view class="container" >
				<image class="icon" src="@/static/image/telephone.png" mode=""></image>
				打电话
			</view>
			<view class="container" @click="onShare({id: buyerId, imageUrl: sellerObj.cardShareImage, title: sellerObj.cardShareTitle})">
				<image class="icon" src="@/pages/shop/static/image/icon_share.png" mode=""></image>
				分享
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	export default {
		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isShopEmployee: state => state.userInfo.isShopEmployee,
				avatarUrl: state => state.userInfo.avatarUrl,
				nickName: state => state.userInfo.nickName,
				telephone: state => state.userInfo.telephone,
				openId: state => state.userInfo.openId,
				employeeId: state => state.userInfo.employeeId,
				shopEmployee: state => state.userInfo.shopEmployee,
				currentShop: state => state.userInfo.currentShop,
				memberShop: state => state.userInfo.memberShop,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerId: state => state.userInfo.buyerObj.id,
			}),
		},
		components: {},
		data() {
			return {
				cardId: '',
				background: {
					'background-image': ''
				},

				isShowWechatQrCode: false,
				logId: '',
				projectTrends: [{
					content: "xxxx",
					cover: "https://etalk.obs.cn-south-1.myhuaweicloud.com:443/1684023609445535746.png"
				}],
				projectAlbums: [],
				noteList: [],
			};
		},
		onLoad(options) {
			that = this;
			api.getProjectAlbums().then(res => {
				that.projectAlbums = res.data
			})
			api.getProjectNews().then(res => {
				that.projectTrends = res.data
			})
			api.getNoteList({
				param: {
					limit: 100,
					page: 0,
				}
			}).then(res => {
				console.log(res)
				if (res.code == 0) {
					that.noteList = res.data
				}
			})
		},



		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),
			addPhoneContact() {
				console.log("addPhoneContact")
				// #ifdef APP-PLUS
				uni.addPhoneContact({
					nickName: this.sellerObj.name,
					mobilePhoneNumber: this.sellerObj.phone,
					success() {
						console.log("添加成功")
						uni.showToast({
							title: '添加成功',
							icon: "success",
						})
					},
				
				})
				// #endif

			},
			previewImg(index) {
				console.log("previewImg", this.sellerObj.wechatQrcode)
				uni.previewImage({
					current: 0,
					urls: [this.sellerObj.wechatQrcode],
				});
			},

			gotoHome() {
				uni.navigateBack({

				})
				// uni.redirectTo({
				//     url:"/pages/client/tabBar/index"
				// })
			},
			onCopyWechatCode() {
				uni.setClipboardData({
					data: that.sellerObj.wechatCode,
					success: function() {
						uni.showToast({
							title: '复制成功！'
						})
					}
				});
			},

			gotoPhone() {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: that.sellerObj.phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			
			onShowWechatQrCode() {
				this.isShowWechatQrCode = true;
			},
			openWechatMap() {
				if (this.shopInfo.location.latitude && this.shopInfo.location.latitude.length > 0) {
					uni.openLocation({
						latitude: parseFloat(this.shopInfo.location.latitude),
						longitude: parseFloat(this.shopInfo.location.longitude),
						name: this.shopInfo.name,
						address: this.shopInfo.address,
						scale: 17
					})
				}
			},
			
			gotoBuildingAlbumDetail(item) {
				uni.navigateTo({
					url: '/pages/shop/material/project/buildingAlbumDetail?id=' + item.id
				})
			},
			
			gotoDetail(item) {
				uni.navigateTo({
					url: '/pages/shop/material/project/buildingAlbumDetail?id=' + item.id
				})
			},
			
			geToProjectTrendList() {
				uni.navigateTo({
					url: '/pages/client/project/news'
				})
			},
			
			
			// onShare(){
			// 	console.log("onShare");
			// 	uni.share({
			// 	    provider: 'weixin',
			// 	    scene: "WXSceneSession",
			// 	    type: 5,
			// 	    imageUrl: this.sellerObj.cardShareImage,
			// 	    title: this.sellerObj.cardShareTitle,
			// 	    miniProgram: {
			// 	        id: "gh_f9c917ce515d",//'gh_9877c69b6b56',
			// 	        path: '/pages/home/home',
			// 	        type: 0,
			// 	        webUrl: 'http://uniapp.dcloud.io'
			// 	    },
			// 	    success: ret => {
			// 	        console.log("onShare",JSON.stringify(ret));
			// 	    },
			// 		fail: err=>{
			// 			console.log("onShare err",JSON.stringify(err),err);
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F3F3;
	}

	.headerContainer {
		width: 702rpx;
		height: 402rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		background-size: 100% 100%;
		position: relative;
		overflow: hidden;
		margin-top: 30rpx;

		.infoWrapper {
			width: 450rpx;
			height: 402rpx;
			padding: 30rpx 0 30rpx 20rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url(https://etalk.obs.cn-south-1.myhuaweicloud.com/wechat_card_template.png);
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.name {
				font-size: 34rpx;
				font-weight: bold;
				color: #ffffff;
				line-height: 45rpx;
				margin-bottom: 15rpx;
				width: 100%;
			}

			.shopName {
				font-size: 26rpx;
				color: #fff;
				width: 100%;
				line-height: 40rpx;
			}

			.itemContainer {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				line-height: 45rpx;
				color: #ffffff;

				.icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}
			}
		}

		.mask {
			position: absolute;
			right: 0;
			top: 0;
			width: 314rpx;
			height: 402rpx;
			background-color: #fff;
			// background-color: #0099ff;
		}




		.avatar {
			width: 240rpx;
			height: 240rpx;
			position: absolute;
			left: 414rpx;
			top: 50rpx;
			border-radius: 50%;
		}



	}

	.introContainer {
		width: 702rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 30rpx;

		.title {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #121212;
			margin-top: 40rpx;

			.icon {
				width: 4rpx;
				height: 34rpx;
				background-color: #16a5fe;
				margin-right: 34rpx;
			}

			.text {
				width: 600rpx;
			}
		}

		.more {
			// color: #0099ff;
			margin-right: 30rpx;
			margin-left: 10rpx;
		}

		.right {
			width: 184rpx;
			height: 160rpx;
			border-radius: 20rpx;
			background-color: #F3F3F3;
		}

		.content {
			width: 642rpx;
			font-size: 28rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 40rpx;
			letter-spacing: 0rpx;
			color: #4b5b7e;
			margin-bottom: 56rpx;
			margin-left: 23rpx;
			margin-top: 40rpx;
			word-wrap: break-word;
		}

		.address {
			display: flex;
			margin-bottom: 56rpx;
			margin-left: 23rpx;
			margin-top: 40rpx;

			.left {
				width: 26rpx;
				height: 26rpx;
				margin-right: 20rpx;
				margin-top: 6rpx;
			}

			.middle {
				width: 550rpx;
				font-size: 28rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 40rpx;
				letter-spacing: 0rpx;
				color: #4b5b7e;
				word-wrap: break-word;
			}

			.right {
				margin-left: 30rpx;
				width: 24rpx;
				height: 24rpx;
				margin-top: 6rpx;
			}

		}
	}

	.middleContainer {
		width: 702rpx;
		height: 182rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 24rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 26rpx;
			color: #333333;
			line-height: 26rpx;

			.icon {
				width: 42rpx;
				height: 42rpx;
				margin-bottom: 20rpx;
			}

		}
	}

	.bottomContainer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 150rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: #F3F3F3 1px solid;

		.container {
			width: 350rpx;
			height: 88rpx;
			background: #0099ff;
			border-radius: 12rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 12rpx;

			.icon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 15rpx;
			}
		}
	}

	.imageWrapper {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		.imageContainer {
			width: 30%;
			height: 300rpx;
			background: #FFFFFF;
			box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
			border-radius: 20rpx;
			padding: 18rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			margin-left: 18rpx;
			margin-bottom: 18rpx;

			.icon {
				background-color: #F3F3F3;
				width: 100%;
				height: 200rpx;
			}

			.title {
				width: 100%;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				margin-top: 2rpx;
				text-align: center;
			}
		}
	}

	.trendsContainer {
		width: 660rpx;
		height: 213rpx;
		margin-left: 25rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		color: #666666;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		line-height: 42rpx;

		.left {
			width: 454rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;

			.title {
				width: 420rpx;
				font-size: 30rpx;
				color: #515151;
				line-height: 40rpx;
				// height: 80rpx;
			}

		}

		.detailWrapper {
			margin-top: 30rpx;
			width: 200rpx;
			height: 50rpx;
			background-color: #1890FF;
			color: #FFFFFF;
			line-height: 50rpx;
			font-size: 26rpx;
			text-align: center;
			border-radius: 10rpx;
		}

		.right {
			width: 340rpx;
			height: 160rpx;
			border-radius: 20rpx;
			background-color: #F3F3F3;
		}
	}

	.noteContainer {
		width: 660rpx;
		margin-left: 20rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		.header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;		
			align-items: center;
			.left {
				width: 420rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					width: 100%;
					font-size: 30rpx;
					color: #515151;
					line-height: 42rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.detail {
					width: 100%;
					font-size: 20rpx;
					line-height: 25rpx;
					color: rgba(25, 25, 25, 0.5);
					min-height: 50rpx;
					margin-bottom: 20rpx;
				}

				.dataWrapper {
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					color: rgba(60, 60, 60, 0.5);
					font-size: 20rpx;
					margin-bottom: 15rpx;

					.pageViews {
						display: flex;
						align-items: center;

						.iconWrapper {
							width: 28rpx;
							height: 16rpx;
							margin-right: 10rpx;
						}
					}

					.timeWrapper {
						display: flex;
						align-items: center;
						.iconWrapper {
							width: 19rpx;
							height: 18rpx;
							margin-right: 10rpx;
						}
					}
				}
			}

			.right {
				width: 184rpx;
				height: 138rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>